import Alarm from "@/assets/icons/Alarm.jsx";
import Evidence from "@/assets/icons/Evidence.jsx";
import Law from "@/assets/icons/Law.jsx";
import Report from "@/assets/icons/Report.jsx";
import { useNavigation } from '@react-navigation/native'
import { Text, TouchableOpacity, View } from 'react-native';

import { SafeScreen } from '@/components/templates';

const menu = [
    {
      description: "已办完的流程",
      icon: <Alarm />,
      title: "报案",
      url : "/(home)/(process)/alarm"
    },
    {
      description: "进行中的流程",
      icon: <Report />,
      title: "举报",
    },
    {
      description: "待办的流程",
      icon: <Evidence />,
      title: "证据提交",
    },
    {
      description: "待办的流程",
      icon: <Law />,
      title: "法律援助",
    },
  ];
function Process() {
  const navigation = useNavigation()
  return (
    <SafeScreen className="flex-1 bg-white">
      <View className="h-72 bg-blue-600">
        <Text className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl font-bold text-white">
          九重安全为您持续守护
        </Text>
      </View>
      <View className="mx-2 mt-[-70px] overflow-hidden rounded-[20px] bg-white">

        <View className="flex flex-col gap-10 px-4 mt-12">
          {menu.map((item) => (
            <TouchableOpacity
              className="ml-10 flex-row items-center rounded-lg"
              key={item.title}
              onPress={() => item.url && navigation.navigate(item.url)}
            >
              <View className="mr-4 h-10 w-10 items-center justify-center rounded-full bg-blue-500">
                {item.icon}
              </View>
              <Text className="text-base font-semibold">{item.title}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    </SafeScreen>
  );
}

export default Process;
